<%--
  Created by IntelliJ IDEA.
  User: Summer
  Date: 2018/12/10
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@include file="../common/IncludeTop.jsp"%>
<p></p>
<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>

<div id="Main">
    <div id="Sidebar">
        <!--左侧导航栏-->
        <div id="SidebarContent">
            <a href="viewCategory?categoryId=FISH"><img src="images/fish_icon.gif" /></a>
            <br/> Saltwater, Freshwater <br/>
            <p></p>
            <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
            <br /> Various Breeds <br />
            <p></p>
            <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
            <br /> Various Breeds, Exotic Varieties <br />
            <p></p>
            <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
            <br /> Lizards, Turtles, Snakes <br />
            <p></p>
            <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
            <br /> Exotic Varieties
        </div>
    </div>

    <div id="MainImage">
        <div id="MainImageContent">
            <!--中间显示栏-->
            <map name="estoremap">
                <area alt="Birds" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" onmouseover="overFn1(this)"  onmouseleave="outFn1()" class="area1"/>
                <area alt="Fish" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" onmouseover="overFn1(this)"  onmouseleave="outFn1()" class="area2"/>
                <area alt="Dogs" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" onmouseover="overFn1(this)"  onmouseleave="outFn1()" class="area3"/>
                <area alt="Reptiles" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" shape="rect" onmouseover="overFn1(this)"  onmouseleave="outFn1()" class="area4"/>
                <area alt="Cats" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect" onmouseover="overFn1(this)"  onmouseleave="outFn1()" class="area5"/>
                <area alt="Birds" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect" onmouseover="overFn1(this)"  onmouseleave="outFn1()" class="area1"/>

            </map>
            <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" alt="splash"/>
            <area id="textShow" shape="rect" coords="0,0,0,0"/>
        </div>
    </div>

    <script type="text/javascript" src = "js/jquery.min.js"></script>
    <script type="text/javascript">
        function overFn1(obj){//鼠标在上面
            let area = obj;
            let content;
            if(area.className==="area1") { content = "<h3>Bird</h3>";}
            else if(area.className==="area2")  content = "<h3>Fish</h3>";
            else if(area.className==="area3")  content = "<h3>Dog</h3>";
            else if(area.className==="area4")  content = "<h3>Reptile</h3>";
            else if(area.className==="area5")  content = "<h3>Cat</h3>";

            let coords = area.coords;

            if(area.className==="area1") {content+="<h5>Amazon Parrot</h5>"+"<h5>Finch</h5>";}
            else if(area.className==="area2") content+="<h5>Koi</h5>"+"<h5>Goldfish</h5>"+"<h5>Angelfish</h5>"+"<h5>Tiger Shark</h5>";
            else if(area.className==="area3") content+="<h5>Bulldog</h5>"+"<h5>Chihuahua</h5>"+"<h5>Dalmation</h5>"+"<h5>Poodle</h5>"+"<h5>Golden Retriever</h5>"+"<h5>Labrador Retriever</h5>";
            else if(area.className==="area4") content+="<h5>Iguana</h5>"+"<h5>Rattlesnake</h5>";
            else if(area.className==="area5") content+="<h5>Persian</h5>"+"<h5>Manx</h5>";
            else content+="<h5>"+area.className+"</h5><h5>"+coords+"</h5>";
            $("#textShow").fadeIn("slow");
            $("#textShow").html(content);
            if(area.className==="area1") { $("#textShow").css({"background-color":"rgb(102,205,170)","width":"150px","height":"120px","position":"absolute","top":"400px","left":"900px","z-index":"800","border-radius":"10px"});}
            else if(area.className==="area2")  $("#textShow").css({"background-color":"rgb(102,205,170)","width":"150px","height":"200px","position":"absolute","top":"400px","left":"600px","z-index":"800","border-radius":"10px"});
            else if(area.className==="area3")  $("#textShow").css({"background-color":"rgb(102,205,170)","width":"150px","height":"280px","position":"absolute","top":"470px","left":"670px","z-index":"800","border-radius":"10px"});
            else if(area.className==="area4")  $("#textShow").css({"background-color":"rgb(102,205,170)","width":"150px","height":"120px","position":"absolute","top":"500px","left":"750px","z-index":"800","border-radius":"10px"});
            else if(area.className==="area5")  $("#textShow").css({"background-color":"rgb(102,205,170)","width":"150px","height":"120px","position":"absolute","top":"470px","left":"840px","z-index":"800","border-radius":"10px"});
            // $("#textShow").css({"background-color":"rgb(227,198,198)","width":"150px","height":"200px","position":"absolute","top":"400px","left":"600px","z-index":"800","border-radius":"10px"});
            $("#textShow").coords= coords;

        }
        function outFn1(){//鼠标离开
            let content = "";

            $("#textShow").fadeOut("fast");
            $("#textShow").html(content);
            $("#textShow").css({"background-color":"rgb(227,198,198)","width":"0px","height":"0px","position":"absolute","z-index":"800","border-radius":"10px"});
            $("#textShow").coords= "0,0,0,0";

        }
    </script>

    <div id="Separator">&nbsp;</div>
<%@include file="../common/IncludeBottom.jsp"%>